<template>
  <div id="specialCardRecharge"  class="same-change-oldstyle">
    <div class="">
      <div class="same-head-box" >
          <div class="saem-seat-box" >
            <div class="saem-seat-left">
              <span>当前位置：</span>
                <el-breadcrumb separator-class="el-icon-arrow-right">
                  <el-breadcrumb-item>特殊水卡充值/开卡</el-breadcrumb-item>
                </el-breadcrumb>
            </div>
            <div class="saem-seat-right">
              <button class="same-search-btns same-search-export" @click="RefreshFun">刷新</button>
              <button class="same-search-btns" @click="returnBack">返回</button>
            </div>
          </div>
      </div>
      <div class="carddes">
        <div class="balance-box" v-if="balances &&PartnerQuota.is_self!=2">
          特殊水卡账户余额：
          <span class="balspan">{{balances | filterNumber}}</span> 元
        </div>
        <div class="centBox">
          <div class="cent-same-name"><img src="../../../static/images/oC-icon1.png" alt=""> 特殊水卡信息</div>
          <div class="searchitems cardNumBox">
            <div class="same-cont-name">水卡卡号</div>
            <el-input size="medium" v-model="valueShow"  placeholder="请输入特殊水卡卡号" maxlength="16" @input="inputChange"></el-input>
            <span class="hintStr">*</span>
          </div>
          <div class="searchitems" v-show="cardInfo&&valueINput.length>9">
            <div class="same-cont-name"></div>
            <div class="card-msg-box">
              <div class="card-msg-left">
                  <div class="imgbox">
                    <img :src="'../../../static/images/header-img.png'" alt="">
                  </div>
                  <div class="card-user">
                    <span>{{cardInfo.full_name}}</span>
                    <div>{{cardInfo.tel}}</div>
                  </div>
              </div>
              <div class="card-msg-right">
                 <div> 余额：<span>{{cardInfo.balance|filterNumber}}</span>元</div>
                 <div>园区类型：{{cardInfo.village_type}}</div>
                 <div>园区名称：{{cardInfo.village_name}}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 需要填写的信息 -->
      <div class="centBox scandTwo pdb-50" v-if="!cardInfo&&valueINput.length>9 || cardInfo&&cardInfo.full_name=='' || cardInfo&&cardInfo.tel=='' || cardInfo&&cardInfo.village_name==''">
        <div class="cent-same-name"><img src="../../../static/images/oC-icon2.png" alt=""> 新增特殊水卡信息 <span>(完善用户信息以便获得更好的售后服务)</span></div>
          <div class="special-title" style="padding-top:10px">
            <el-icon class="el-icon-postcard"></el-icon>
            <span>用户信息</span>
          </div>
          <div class="row-line">
            <div class="row-cell">
              <span class="row-label">姓名</span>
              <el-input class="row-ipt" v-model="full_name" size="medium" placeholder="请输入姓名"></el-input>
              <span class="hintStr">*</span>
            </div>
            <div class="row-cell">
              <span class="row-label">手机号码</span>
              <el-input class="row-ipt" v-model="tels" size="medium" maxlength="11" placeholder="请输入手机号码"></el-input>
              <span class="hintStr">*</span>
            </div>
          </div>
          <div class="row-line">
            <!--<div class="row-cell">-->
              <!--<span class="row-label">性别</span>-->
              <!--<el-radio-group v-model="gender" class="row-ipt">-->
                <!--<el-radio label="1">男</el-radio>-->
                <!--<el-radio label="2">女</el-radio>-->
              <!--</el-radio-group>-->
            <!--</div>-->
            <div class="row-cell">
              <span class="row-label">园区名称</span>
              <el-select @change="chooseVillage" size="medium" class="row-ipt" v-model="villageIndex" placeholder="请选择园区名称">
                <el-option v-for="(item,index) in villageList" :label="item.village_name" :value="index" :key="item.id">
                </el-option>
              </el-select>
              <span class="hintStr">*</span>
            </div>
          </div>
          <div class="row-line" v-if="villageIndex!==''">
            <div class="row-cell">
              <span class="row-label">地址信息</span>
              <div class="disable-cell max-width-300 over-hidden">
                {{villageList[villageIndex].province_name}}-{{villageList[villageIndex].city_name}}-{{villageList[villageIndex].area_name}}
              </div>
              <span class="deliver-line">-</span>
              <div class="disable-cell max-width-300 over-hidden">{{villageList[villageIndex].address}}</div>
              <span class="deliver-line">-</span>
              <el-input size="medium" placeholder="请输入详细地址" v-model="addressTwo"></el-input>
            </div>
          </div>
          <div class="row-line">
            <div class="row-cell">
              <span class="row-label">证件类型</span>
              <el-select v-model="certificate" size="medium" class="row-ipt" placeholder="请选择证件类型">
                <el-option v-for="item in certificateType" :value="item.id" :label="item.label" :key="item.label">
                </el-option>
              </el-select>
              <span class="hintStr">*</span>
            </div>
            <div class="row-cell">
              <span class="row-label">证件号码</span>
              <el-input v-model="certificate_number" class="row-ipt" size="medium" placeholder="请输入证件号码"></el-input>
              <span class="hintStr">*</span>
            </div>
          </div>
          <div class="row-line">
            <div class="row-cell  upload-cell">
              <span class="row-label">证件照片</span>
              <el-upload accept="image/*" :on-preview="handlePictureCardPreview" :before-upload="beforeUpload"
                :limit="2" :action="uploadUrl" :on-error="uploadError" :on-remove="handleRemove"
                :on-exceed="uploadExceed" :on-progress="uploadProgress" :on-success="uploadSuccess"
                list-type="picture-card">
                <i slot="default" class="el-icon-plus"></i>
              </el-upload>
              <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="dialogImageUrl" alt="">
              </el-dialog>
              <span class="hintStr">*</span>
            </div>
          </div>
          <div class="special-title">
            <el-icon class="el-icon-bank-card"></el-icon>
            <span>特殊水卡信息</span>
          </div>
          <div class="row-line">
            <div class="row-cell">
              <span class="row-label">水卡类型</span>
              <el-select size="medium" v-model="cardType" class="row-ipt" placeholder="请选择水卡类型">
                <el-option filterable v-for="item in cardSpecialType" :value="item.id" :label="item.label"
                  :key="item.label">
                </el-option>
              </el-select>
              <span class="hintStr">*</span>
            </div>
            <div class="row-cell">
              <span class="row-label">审核类型</span>
              <el-select v-model="audit_type" size="medium" class="row-ipt" placeholder="请选择审核类型">
                <el-option v-for="item in auditTypes" :value="item.id" :label="item.label" :key="item.label">
                </el-option>
              </el-select>
              <span class="hintStr">*</span>
            </div>
          </div>

          <div class="row-line row-line-two">
            <div class="row-cell">
              <span class="row-label">充值金额</span>
              <el-radio-group v-model="re_charges" size="medium" @change="choseOpenChange">
                <el-radio  class="mr-10" :key="item" v-for="item in rechargeConfig" :label="item" border>{{item}}元</el-radio>
                  <el-input v-model="charge_open_money" type="Number" class="row-ipt" size="medium" placeholder="请输入自定义充值金额" @focus="re_charges=''" ></el-input>
              </el-radio-group>
              <span class="hintStr">*</span>
            </div>
          </div>

          <div class="row-line">
            <div class="row-cell">
              <span class="row-label">水卡押金</span>
              <el-radio-group v-model="deposit" size="medium">
                <el-radio class="mr-10" :key="item" v-for="item in depositConfig" :label="item" border>{{item}}元</el-radio>
              </el-radio-group>
              <span class="hintStr">*</span>
            </div>
          </div>
          <div class="row-line">
            <el-button size="medium" type="primary" @click="applySpecialCard" class="submit-btn">确定申请</el-button>
          </div>
      </div>
      <!-- 不需要填写信息直接充值 -->
      <div class="centBox scandTwo" v-else>
        <div class="cent-same-name"><img src="../../../static/images/oC-icon4.png" alt=""> 套餐</div>
        <div class="row-line row-line-two">
          <div class="row-cell">
            <span class="row-label">充值金额</span>
            <el-radio-group v-model="chargeMoney" size="medium" @change="choseChange">
              <el-radio  class="mr-10" :key="item" v-for="item in localRechargesConfig" :label="item" border>{{item}}元</el-radio>
              <el-input v-model="divRecharge" type="Number" class="row-ipt" size="medium" placeholder="请输入自定义充值金额" @focus="chargeMoney=''" ></el-input>
            </el-radio-group>
            <span class="hintStr">*</span>
          </div>
        </div>
        <div class="row-line row-line-two">
          <div class="row-cell">
            <span class="row-label">充值备注</span>
            <el-input  placeholder="请输入备注" class="textarea" type="textarea" v-model="remark" :rows="4" :show-word-limit="false" maxlength="100" minlength="5"></el-input>
            <span class="hintStr">*</span>
          </div>
        </div>
        <div class="row-line submit">
          <el-button size="medium" type="primary" @click="rechangeSpecialCard" class="submit-btn">确定充值</el-button>
        </div>
      </div>


    </div>
  </div>
</template>
<script>
	const certificateType = [{ //证件类型
		id: '1',
		label: '身份证'
	}, {
		id: '2',
		label: '军官证'
	}, {
		id: '3',
		label: '户口本'
	}, {
		id: '4',
		label: '出身证明'
	}];
	const auditTypes = [{ //审查类型
		id: '1',
		label: '年审'
	}, {
		id: '2',
		label: '月审'
	}, {
        id: '3',
        label: '不定期'
    }];
  //选择充值金额
  const localRechargesConfig = [20, 50, 100, 120, 150, 200];
  export default {
  name: "specialCardRecharge",
  data: function() {
    return {
      uploadUrl: process.env.API_ROOT + "Common/Common/upload",
      dialogImageUrl: '',//回显的
      dialogVisible: false,
      uploadImg:[],//上传的图片路径
      balances: 0, //充值账户余额
      valueINput: "", //卡号
      valueShow:'',//卡号四位空格
      cardInfo:{},//获取到的用户信息
      full_name:'',
      tels:'',
      villageList:'',//园区列表
      villageIndex: "", //选择的园区Index
      village_name:'',//选中的园区名称
      addressTwo:'',//编辑园区详细地址
      localRechargesConfig,//充值金额列表
      chargeMoney:localRechargesConfig[0],//充值金额
      divRecharge:'',//自定义充值金额

      depositConfig:[],//押金配置
      deposit:'',//选中的押金
      auditTypes,//审核类型
			audit_type: '',//选中的审查类型
      rechargeConfig: [],//充值金额配置
      re_charges:'',//当前选中充值
      charge_open_money:'',//充值其他金额
      cardSpecialType: [],//特殊水卡类型
      cardType:'',//选中
      certificateType,//证件类型
      certificate:'',
      certificate_number:'',//证件号码
      remark:'',//备注
      PartnerQuota:'',
    }
  },
  created: function() {
    this.getPartnerQuota();//获取当前合伙人的余额
    this.remoteMethod();//获取园区
    this.getSpecialCardType();//获取特殊水卡类型
    this.getRechargesConfig(); //获取充值金额配置
    this.getDepositConfig();  //获取押金配置
    console.log('卡号',this.$route.query.card)
    var card=this.$route.query.card?this.$route.query.card:'';
    if(card.length>9){
      this.valueINput=card;
      this.inputChange(card);
    }
    
  }, 
  inject: ['reload'],
  methods: {
    RefreshFun(){
			// 调用reload方法，刷新整个页面
			this.reload()
		},
		//返回
		returnBack(){
			this.$router.back(-1);
    },
    //园区选择
    chooseVillage(i) {
      this.villageIndex = i;
      this.village_id = this.villageList[i].id;
      this.village_name = this.villageList[i].village_name;
    },
    //选择充值金额
    choseChange(e){
        this.charge_open_money='';
         console.log('选择的数据',this.charge_open_money);
    },
    //开卡充值
    choseOpenChange(e){
      this.divRecharge='';
    },
    handlePictureCardPreview(file) {
				this.dialogImageUrl = file.url;
				this.dialogVisible = true;
    },
    beforeUpload(file) {
				const isLt2M = file.size / 1024 / 1024 < 2;
				if (!isLt2M) {
					this.$message.error('上传图片大小不能超过2MB!');
				}
				return isLt2M;
    },
    uploadError() {
				this.loading.close();
    },
    handleRemove(file, fileList) {
				//console.log(file, fileList);
				let uploadImg = [];
				fileList.forEach(item => {
					if (item.response.code > 0) {
						uploadImg.push(
							item.response.data
						);
					}
				})
				this.uploadImg = uploadImg;
				console.log(this.uploadImg, "上传的图片");
    },
    uploadExceed() {
				this.$message.error(`最多只能上传2张图片`);
    },
    uploadProgress() {
				this.loading = this.$loading({
					lock: true,
					text: '图片上传中',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				});
    },
    //证件照上传成功
    uploadSuccess(e, file, fileList) {
      this.loading.close();
      if (e.code === 1000) {
        let uploadImg = [];
        fileList.forEach(item => {
          if (item.response.code > 0) {
            uploadImg.push(
              item.response.data
            );
          }
        })
        this.uploadImg = uploadImg;
      } else {
        this.$message.error(e.message);
      }
    },

     //input输入
    inputChange(e){
        this.$message.closeAll();
        e.length<=0? this.$message({
          type: "warning",
          showClose: true,
          message: "请输入卡号！",
          center: true
        }):'';
        this.valueINput=e.replace(/\s*/g, "");
        this.valueShow=e.replace(/\s/g, '').replace(/\D/g, '').replace(/(\d{4})(?=\d)/g, "$1 ");
        if(this.valueINput.length>=10){
          this.getwaterCardsInfo();
        }else{
          this.cardInfo = '';
        }
    },
    // 搜索
    getwaterCardsInfo: function() {
      var that = this;
      if (!that.valueINput) {
        this.$message({
          type: "warning",
          showClose: true,
          message: "请输入卡号！",
          center: true
        });
        return false;
      }
      that.$post({
        url: "Partner/WaterCard/getWaterCard",
        data: { card: that.valueINput },
        success: data => {
          if (data.code == 1000) {
            that.cardInfo = data.data;
            that.full_name= data.data.full_name;
            that.tels= data.data.tel;
            that.village_name= data.data.village_name;
          } else {
            that.cardInfo = '';
            that.full_name= '';
            that.tels= '';
            that.village_name= '';
           this.$message.closeAll();
          }
        }
      });
    },
    //获取当前合伙人的余额
    getPartnerQuota: function() {
      var that = this;
      that.$post({
        url: "Partner/WaterCard/getPartnerQuota",
        data: {},
        success: data => {
          if (data.code == 1000) {
            that.balances = data.data.special_recharge_balance;
            that.PartnerQuota=data.data;
          }
        }
      });
    },
    //搜索园区
    remoteMethod() {
      var that = this;
      // Ajax请求
      that.$post({
        url: "Partner/WaterCard/getPartnerVillage",
        data: {
          village_name: '',
          row: 999999,
          page: 1,
          sell_water_status: "",
          template_status: ""
        },
        success: data => {
          if (data.code == 1000) {
            that.villageList = data.data;
          } else {
            that.$message.error(data.message);
          }
        }
      });
    },
    //获取特殊水卡类型
    getSpecialCardType() {
      this.$post({
        url: "Partner/WaterCard/getCarType",
        data: {
          type: 2,
          is_apply: 1
        },
        success: res => {
          if (res.code > 0) {
            this.cardSpecialType = res.data;
          } else {
            this.$message.error(res.message);
          }
        }, error: e => {
          this.$message.error("网络错误");
        }
      })
    },
    //获取充值金额配置
    getRechargesConfig() {
      this.$post({
        url: 'Partner/WaterCard/getSpecialCardRechargeConfig',
        success: (res) => {
          if (res.code > 0) {
            this.rechargeConfig = res.data;
            this.re_charges = res.data[0];//默认配置第一条选中
          } else {
            this.$message.error(res.message);
          }
        }, error: e => {
          this.$message.error("网络错误");
        }
      })
    },
    //获取押金配置
    getDepositConfig() {
      this.$post({
        url: "Common/Common/cardDeposit",
        success: res => {
          if (res.code > 0) {
            this.depositConfig = res.data;
            this.deposit = res.data[0];
          } else {
            this.$message.error(res.message);
          }
        }, error: e => {
          this.$message.error("网络错误");
        }
      })
    },
    //特殊卡充值
    rechangeSpecialCard(){
      if (this.valueINput === "") {
        this.$message.error("水卡号不能为空!");
        return false;
      }
      if (this.valueINput.length<=9) {
        this.$message.error("请输入正确水卡号!");
        return false;
      }
      if(this.chargeMoney=='' && this.divRecharge==''){
        this.$message.error("请输入或者选择充值金额!");
        return false;
      }
       if (this.remark.length==0) {
        this.$message.error("请输入充值备注!");
        return false;
      }
        if (this.remark.length<=4) {
        this.$message.error("备注字数不能小于5位!");
        return false;
      }
      this.$post({
        url: "Partner/WaterCard/waterCardRecharge",
        data:{
            card: this.valueINput,
            money: this.divRecharge?this.divRecharge:this.chargeMoney,
            type: 3,
            remake: this.remark
        },
        success: res => {
          if (res.code > 0) {
            this.$message.success(res.message);
            	setTimeout(()=>{
									this.$router.push({ path: '/userRecharge' })
								},1500)
          } else {
            this.$message.error(res.message);
          }
        }, error: e => {
          this.$message.error("网络错误");
        }
      })
    },
    //申请特殊水卡
			applySpecialCard() {
				if (this.full_name == "") {
					this.$message.error("请输入姓名");
					return false;
				}
				let tels = this.tels;
				if (this.tels == "") {
					this.$message.error("请输入手机号码");
					return false;
        }
         var pattern =  /^(1[3-9])\d{9}$/; 
        if (!pattern.test(this.tels)) {
					this.$message.error("手机号码有误");
					return false;
				}
				if (this.villageIndex === "") {
					this.$message.error("请选择园区");
					return false;
				}
				if (this.certificate === "") {
					this.$message.error("请选择证件类型");
					return false;
				}
				if (this.certificate_number == "") {
					this.$message.error("请输入证件号码");
					return false;
				}
				if (this.uploadImg.length == 0) {
					this.$message.error("请上传证件照片");
					return false;
				}
				if (this.cardType === "") {
					this.$message.error("请选择水卡类型");
					return false;
				}
				if (this.card == "") {
					this.$message.error("请填写水卡号");
					return false;
				}
				if (this.audit_type === "") {
					this.$message.error("请选择审核类型");
					return false;
				}
				const audit_data = [];
				this.uploadImg.forEach(item => {
					audit_data.push(item.url);
				})
				const village = this.villageList[this.villageIndex];
				this.$post({
					url: "Partner/WaterCard/auditSpecialCard",
					data: {
						full_name: this.full_name,
						tel: this.tels,
						card_class: 2,
						card_type: this.cardType,
						paper_type: this.certificate,
						audit_type: this.audit_type,
						IDcard: this.certificate_number,
						province: village.province,
						city: village.city,
						sn: this.valueINput,
						area: village.area,
						address: village.address,
						address_two: this.addressTwo,
						village_name: village.village_name,
						card_price: this.charge_open_money?this.charge_open_money:(this.re_charges?this.re_charges:0),
						deposit: this.deposit,
						audit_data: audit_data
					}, success: res => {
						if (res.code > 0) {
								this.$message.success(res.message);
								setTimeout(()=>{
									this.$router.push({ path: '/applylist' })
								},1500)
						} else {
							this.$message.error(res.message || "网络错误");
						}
					}, error: e => {
						this.$message.error("网络错误");
					}
				})

			},
  }
}

</script>
<style >
.cardNumBox ::-webkit-input-placeholder {
  color: #b3b3b3;
  font-size: 14px;
}
</style>
<style scoped>

.balance-box {
  padding: 10px 40px;
  background: #FAFAFA;
}
.balspan {
  color: #FF6565;
  font-weight: bold;
  font-size: 22px;
}
.centBox {
  padding: 0px 40px;
}
.centBox .cent-same-name{
 padding:15px 0px;
 width: 100%;
 display: flex;
 justify-content: flex-start;
 align-items: center;
 color: #2C5586;
 font-size: 16px;
 font-weight:500;
}
.centBox .cent-same-name span{
  font-size: 12px;
  color: #FF6565;
  padding-left: 5px;  
}
.centBox .cent-same-name img{
   width: 17px;
  display: block;
  margin-right: 13px;
}
.centBox .searchitems {
  padding-left: 36px;
  display: flex;
  align-items: center;
  box-sizing: border-box;
}
.onlyMoney{
  align-items: flex-start!important;
}
.searchitems .same-cont-name{
  width:70px;
  padding-right: 10px;
  box-sizing: border-box;
  font-size:14px;
  font-weight:400;
  color:rgba(51,51,51,1);
}
.searchitems .new-chose-box{
  min-width: 700px;
  display: flex;
}

.searchitems .chose-one{
  text-align: center;
  min-width: 200px;
  height: 36px;
  line-height: 36px;
  font-size:18px;
  font-weight:400;
  color:rgba(51,51,51,1);
  background:rgba(255,255,255,1);
  border:1px solid rgba(237,237,237,1);
  border-radius:10px;
  margin-right: 15px;
}

.searchitems .onChose{
  color:#FFF;
  background:rgba(44,85,134,1);
  border:1px solid rgba(237,237,237,1);
}
.new-hint-show{
  padding-top: 2px;
  font-size:12px;
  font-weight:400;
  color:rgba(45,86,134,1);
}
.card-msg-box{
  width: 380px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height:180px;
  background:rgba(250,250,250,1);
  border-radius:10px;
  padding: 10px 0;
  box-sizing: border-box;
  margin-top: 2px;
  box-shadow: 1px 2px 20px 0px rgba(136,159,184,0.3);
}
.card-msg-left{
  width: 126px;
  height: 160px;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  flex-direction: column;
  box-sizing: border-box;
  border-right: 1px dashed rgba(154,152,152,.5);
}
.card-msg-left .imgbox img{
  width:77px;
  height:77px;
  display: block;
  border-radius:50%;
  border:1px solid rgba(35,174,179,1);
}
.card-msg-left .imgbox{
  display: flex;
  justify-content: center;
  align-items: center;
  width:88px;
  height:88px;
  background:rgba(44,86,134,.1);
  border:1px solid rgba(36,174,180,.1);
  border-radius:50%;
}
.card-msg-left .card-user{  
   text-align: center;
}
.card-msg-left .card-user span{  
  width: 100%;
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
  font-size:16px;
  font-weight:bold;
  color:rgba(45,86,134,1);
}
.card-msg-right{
  width:254px;
  height: 160px;
  padding: 12px 15px;
  box-sizing: border-box;
  font-size:16px;
  font-weight:400;
  color:rgba(76,76,76,1);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-direction: column;
}
.card-msg-right span{
  color:#FF6666;
  font-weight: 600;
}
.cardNumBox .el-input {
  width:380px;
  font-size:18px;
} 
.scandTwo{
  margin-top: 20px;
}
.pdb-50{
  padding-bottom: 50px;
}
.max-width-300 {
  max-width: 300px;
}
.over-hidden {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.disable-cell {
  background-color: #fafafa;
  background-image: none;
  border-radius: 4px;
  border: 1px solid #DCDFE6;
  outline: 0;
  padding: 0 15px;
  box-sizing: border-box;
  color: #606266;
  display: inline-block;
  height: 32px;
  line-height: 32px;
  font-size: 15px;
  user-select: none;
  flex-shrink: 0;
}
.textarea{
  width: 380px;
}
	.submit-btn {
		margin-top: 30px;
		margin-left: 20px;
	}
/* *****************const************ */
.special-title {
		padding: 35px 0 0 25px;
		color: #2C5586;
	}
	.row-line {
		display: flex;
		align-items: center;
		width: 800px;
		justify-content: space-between;
		padding-left: 31px;
	}
  .row-line-two{
    width:1200px;
  }

	.row-cell {
		display: flex;
		align-items: center;
		margin-top: 20px;
	}

	.row-label {
		flex-shrink: 0;
		display: inline-block;
		width: 80px;
		text-align: right;
		margin-right: 10px;
		font-size: 14px;
	}

	.row-ipt {
		width: 240px;
	}

	.upload-cell {
		align-items: normal;
	}

	.upload-cell .row-label {
		margin-top: 20px;
	}
  .mr-10{
		margin-right: 10px;
	}

  .el-checkbox {
    margin: 5px;
  }
  .el-checkbox.is-bordered + .el-checkbox.is-bordered {
    margin: 5px;
  }
  .hintStr{
    padding-left: 10px;
    color: #FF6565;
  }
  .el-radio-button__inner, .el-radio-group{
    width: 500px;
  }
  .el-radio.is-bordered+.el-radio.is-bordered{
    margin-left: 0px;
    margin-bottom: 10px;
  }
  .el-radio.is-bordered.is-checked{
     min-width: 95px;
  }
  .el-radio--medium.is-bordered{
    min-width: 95px;
  }
  .el-radio.is-bordered+.el-radio.is-bordered{
    min-width: 95px;
  }
</style>